$do: 12.5em;
$ro: .5*$do;
$ri: .52*$ro;
$gc: radial-gradient(#fff $ri, rgba(#fff, 0) calc(#{$ri} + 1px),
  rgba(#fff, 0) calc(#{$ro} - 1px), #fff calc(#{$ro} - .5px));
$m: radial-gradient(transparent calc(#{$ri} - .5px), red $ri);
$light: #474747;

@function get-stops($hue-start: 150, $hue-range: -180, $num-stops: 9) {
  $list: ();
  $unit: $hue-range/($num-stops - 1);

  @for $i from 0 to $num-stops {
    $hue-curr: $hue-start + $i*$unit;
    $list: $list, hsl(calc(#{$hue-curr} + var(--off, 0)), 85%, 57%)
  }

  @return $list
}
//
//.infinity-body { /* just to prettify things */
//  display: flex;
//  align-items: center;
//  justify-content: center;
//  overflow: hidden;
//  margin: 0;
//  height: 100vh;
//  background: Radial-gradient(rgba($light, .35), rgba($light, 0)),
//  Radial-gradient(at 0 0, $light, #070707);
//
//  @supports not (-moz-transform: scale(2)) {
//    filter: drop-shadow(.25em .25em .25em #000) drop-shadow(.25em .25em .5em #000)
//  }
//}

.∞ { /* relevant styles */
  $r: 1.03*$ro .55*$ro;
  display: flex;
  justify-content: center;
  transform-style: preserve-3d;

  &:before, &:after {
    margin: 0 (-.5*($ro - $ri));
    width: $do;
    height: $do;
    border-radius: 50%;
    transform: rotatex(1deg);
    background: radial-gradient(circle at 51.5% 50%,
      rgba(#fff, 0) calc(#{$ro} - 1px),
      rgba(#fff, .75) $ro),
    radial-gradient(circle at 59.1% 61.36%,
        rgba(#fff, 0) calc(#{nth($r, 1)} - 1px),
        rgba(#fff, .35) nth($r, 1)),
    radial-gradient(circle at 64.39% 43.9%,
        rgba(#fff, 0) calc(#{nth($r, 1)} - 1px),
        rgba(#fff, .35) nth($r, 1)),
    radial-gradient(circle at 54.17% 54.92%,
        rgba(#fff, 0) calc(#{nth($r, 1)} - 1px),
        rgba(#fff, .5) nth($r, 1)),
    radial-gradient(circle at 49.62% 51.87%,
        rgba(#fff, .5) calc(#{nth($r, 2)} - 1px),
        rgba(#fff, 0) nth($r, 2)),
    radial-gradient(circle at 61.36% 0,
        rgba(#fff, .35) calc(#{nth($r, 2)} - 1px),
        rgba(#fff, 0) nth($r, 2)) 50% 100%/ 100% 50% no-repeat,
    radial-gradient(circle at 52.27% 0,
        rgba(#fff, .35) calc(#{nth($r, 2)} - 1px),
        rgba(#fff, 0) nth($r, 2)) 50% 100%/ 100% 50% no-repeat,
    $gc, conic-gradient(from 90deg, get-stops());
    -webkit-mask: $m;
    mask: $m;
    animation: shift 2s linear infinite;
    content: ''
  }

  &:after {
    transform: translatey(1px) rotatex(-1deg);
    background: radial-gradient(circle at 63.9% 100%,
      rgba(#fff, 0) calc(#{nth($r, 1)} - 1px),
      rgba(#fff, .35) nth($r, 1)) 50% 0/ 100% 50% no-repeat,
    radial-gradient(circle at 54.75% 100%,
        rgba(#fff, 0) calc(#{nth($r, 1)} - 1px),
        rgba(#fff, .35) nth($r, 1)) 50% 0/ 100% 50% no-repeat,
    radial-gradient(circle at 51.95% 54.94%,
        rgba(#fff, 0) calc(#{nth($r, 1)} - 1px),
        rgba(#fff, .35) nth($r, 1)),
    radial-gradient(circle at 51% 50.5%,
        rgba(#fff, .5) $ri,
        rgba(#fff, 0) calc(#{$ri} + 1px)),
    $gc, conic-gradient(from 270deg, get-stops(150, 180))
  }
}

.∞ {
  &:before, &:after {
    animation: shift 2s linear infinite;
  }
}

@keyframes shift { to { --off: 360 } }
